<template>
  <div ref="canvas">

  </div>
</template>

<script lang="ts" setup>
import * as THREE from "three";
import {ref, onMounted} from "vue";
import {OrbitControls} from "three/examples/jsm/controls/OrbitControls";

// 画布
const canvas = ref<any>('');
// 场景
const scene = new THREE.Scene();
// 几何体对象
//BoxGeometry：长方体
const box = new THREE.BoxGeometry(100, 100, 100);
// SphereGeometry：球体
const sphere = new THREE.SphereGeometry(50);
// CylinderGeometry：圆柱
const cylinder = new THREE.CylinderGeometry(50,50,100);
// PlaneGeometry：矩形平面
const plane = new THREE.PlaneGeometry(100,50);
// CircleGeometry：圆形平面
const circle = new THREE.CircleGeometry(50);

// 材质对象Material
const material = new THREE.MeshLambertMaterial({
  color: 0x00ffff, // 设置材质颜色
  transparent: true,// 开启透明
  opacity: 0.8,// 设置透明度
  // side: THREE.FrontSide // 默认只有正面可见
  side: THREE.DoubleSide, // 双面可见
});
// 网格模型 mesh
const boxMesh = new THREE.Mesh(box, material);
boxMesh.position.set(0, 0, 0);

const sphereMesh = new THREE.Mesh(sphere, material);
sphereMesh.position.set(200, 0, 0);

const cylinderMesh = new THREE.Mesh(cylinder, material);
cylinderMesh.position.set(400, 0, 0);

const planeMesh = new THREE.Mesh(plane, material);
planeMesh.position.set(0, 0, 200);

const circleMesh = new THREE.Mesh(circle, material);
circleMesh.position.set(0, 0, 300);

scene.add(boxMesh, sphereMesh, cylinderMesh, planeMesh, circleMesh);

// 辅助观察的坐标点
const axesHelper = new THREE.AxesHelper(1000);
scene.add(axesHelper);
// 光源
// 平行光 - DirectionalLight
const directionalLight = new THREE.DirectionalLight(0xffffff);
scene.add(directionalLight);
const ambientLight = new THREE.AmbientLight(0xffffff, 0.4);
scene.add(ambientLight);

// 相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(400, 400, 400);
// 相机看向哪个点，即哪个点出现在画布的中心点
camera.lookAt(0, 0, 0);

// 渲染器对象
const renderer = new THREE.WebGLRenderer();
// 设置three.js渲染区域的尺寸(像素px)
renderer.setSize(window.innerWidth, window.innerHeight);
/**
 * 渲染函数
 */
function render() {
  // 执行渲染操作
  renderer.render(scene, camera);
  requestAnimationFrame(render);
}

// 设置相机控件轨道控制器OrbitControls
const controls = new OrbitControls(camera, renderer.domElement);
// 相机控件.target属性在OrbitControls.js内部表示相机目标观察点，默认0,0,0
console.log('controls.target', controls.target);
controls.update();

onMounted(() => {
  // 将Canvas画布插入到HTML元素中
  canvas.value.appendChild(renderer.domElement);
  render();
});

</script>
